<template>
   <div class="about">
      <el-container>
         <el-aside width="200px">
            <el-menu
                  default-active="/"
                  class="el-menu-vertical-demo"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  @select="onSelect">
               <el-menu-item index="/order1">
                  <i class="el-icon-menu"></i>
                  <span slot="title">订单管理</span>
               </el-menu-item>
               <el-menu-item index="/order2">
                  <i class="el-icon-document"></i>
                  <span slot="title">发票管理</span>
               </el-menu-item>
               <el-menu-item index="/order3">
                  <i class="el-icon-setting"></i>
                  <span slot="title">售后服务</span>
               </el-menu-item>
            </el-menu>
         </el-aside>
         <el-main>
            <router-view></router-view>
         </el-main>
      </el-container>
   </div>
</template>

<script>
   export default {
      data() {
         return {}
      },
      mounted(index) {
         this.$router.push(index)
      },
      methods: {
         onSelect(index, indexPath) {
            console.log(index, indexPath);
            this.$router.push(index)
         }
      }
   }
</script>

<style lang="scss" scoped>
   .el-aside {
      background-color: #D3DCE6;
      color: #333;
      line-height: 100vh;
      height: 100vh;

      .el-menu {
         height: 100vh;
      }
   }

   .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
   }


</style>